<template>
    <transition name="slide">
        <div class="player_box">
            <!-- 退出歌曲详情页面 -->
            <div class="player_esc" @click="playeresc">
                <img src="../../../assets/M_redio/player_max/player_esc.png" alt="">
            </div>
            <div class="player_">
                <div class="player_top">
                    <!-- 歌曲背景图等 -->
                    <div class="player_left">
                        <!-- 播放动画 -->
                        <div class="play_animation">
                            <img src="../../../assets/M_redio/player_max/play_bar.png" alt="" class="play_bar">
                            <div class="player_bg">
                                <img src="../../../assets/M_redio/player_max/music_bg.png" alt="" class="bg_img">
                                <img :src="musiclist.sing_img" alt="" class="music_im">
                            </div>
                        </div>

                        <!-- 控制钮 -->
                        <div class="play_button">
                            <p class="play_ctrl">
                                <img src="../../../assets/M_redio/player_max/islike.png" alt="">
                            </p>
                            <p class="play_ctrl">
                                <img src="../../../assets/M_redio/player_max/download.png" alt="">
                            </p>
                            <p class="play_ctrl">
                                <img src="../../../assets/M_redio/player_max/islike.png" alt="">
                            </p>
                            <p class="play_ctrl">
                                <img src="../../../assets/M_redio/player_max/islike.png" alt="">
                            </p>
                        </div>
                    </div>

                    <!-- 歌词模块 -->
                    <div class="lyricBox">
                        <div class="lyric_top">
                            <h1 class="song_name">{{musiclist.sing_name}}</h1>
                            <div class="sing_msg">
                                <p>专辑：<span>{{musiclist.name}}</span></p>
                                <p>歌手：<span>{{musiclist.singer}}</span></p>
                                <p>来源：<span>{{musiclist.musicSheet[0]}}</span></p>
                            </div>
                        </div>
                        <div class="lyric_cont">
                            <lyric_box class="lyric_msg" ref="playerLyric" :lyric="lyricmsg"></lyric_box>
                        </div>
                    </div>
                </div>

                <!-- 评论区域 -->
                <div class="recommendBox">
                    <recommend></recommend>
                </div>
            </div>
        </div>
    </transition>
</template>

<script>
import lyric_box from './lyric_max';
import recommend from './recommend';

export default {
    watch:{
        lyricmsg() {
            if (this.$refs.playerLyric.$refs.maxscroll != null) {
                this.$refs.playerLyric.$refs.maxscroll.scrollTo(0, 0, 0);
            }
        }
    },
    methods: {
        playeresc(){
            this.$emit('showplayer');
        }
    },
    props: ['musiclist', 'lyricmsg'],
    components:{
        lyric_box,
        recommend,
    }
}
</script>

<style>
/* 滑入 滑入效果 */
.slide-enter-active,.slide-leave-active {
    transition: all 0.5s;
    transform: none;
}

.slide-enter,.slide-leave-to {
  transform: translateY(100%);
}


/* 播放详情页面 */
.player_box{
    width: 100%;
    height: 100%;
    background-color: #16181c;
}

/* 退出控制 */
.player_esc{
    cursor: pointer;
    height: 62px;
}

.player_{
    height: 734px;
    overflow: auto;
}

.player_esc img{
    width: 22px;
    height: 10px;
    margin-top: 20px;
    margin-left: 10px;
}


.player_top{
    width: 80%;
    margin-top: 0px;
    display: flex;
    justify-content:center;
}

.player_left{
    width: 40%;
    margin-left: 50px;
}

/* 播放光盘区域 */
.play_animation{
    position: relative;
    height: 400px;
    margin-left: 50px;
}

.play_bar{
    position: absolute;
    top: 20px;
    left: 140px;
    height: 140px;
    z-index: 4;
}

.player_bg{
    position: absolute;
    top: 80px;
    width: 300px;
    height: 300px;
}

.bg_img{
    position: absolute;
    left: 8px;
    top: 8px;
    width: 300px;
    height: 300px;
}

.music_im{
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -75px;
    margin-top: -75px;
    width: 165px;
    height: 165px;
    border-radius: 50%;
}

.play_button{
    width: 320px;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    margin-left: 50px;
}

.play_ctrl{
    width: 44px;
    height: 44px;
    border-radius: 50px;
    background-color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.play_ctrl img{
    width: 28px;
    height: 28px;
}

/* 歌词区域 */
.lyricBox{
    width: 40%;
    margin-left: 40px;
    margin-top: 50px;
}

.song_name{
    font-weight: 300;
    margin-bottom: 10px;
}

.sing_msg{
    display: flex;
    justify-content: space-between;
}

.sing_msg p{
    font-size: 12px;
    color: #ccc;
    font-weight: 200;
}

.sing_msg span{
    font-size: 12px;
    color: #8fb8e2;
    font-weight: 200;
}

.lyric_cont{
    margin-top: 30px;
    /* height: calc(100% - 55px); */
    height: 310px;
    overflow: hidden;
}
</style>